<template>
  <view class="">
    <view class="contbox">
      <view class="header-box">
        <view class="header-right">
          <view class="head">
            <image class="headeimg" :src="userheadeimg" mode=""></image>
          </view>
          <view class="header-text">
            <view class="username">{{name}}</view>
            <view class="num">合伙人</view>
          </view>
        </view>
      </view>
      <view class="sum-box">
         <view class="withdraw">
           <view class="brokerage">
             <view class="money" >{{jewallet}}</view>
             <view class="">可提现佣金(元)</view>
           </view>
           <view class="">
             <button class="txbtn" @click="withdrawals">申请提现</button>
           </view>
         </view>
         <view class="record" @click="txrecord">
           <view class="" style="display: flex;align-items: center;"><image class="wallet" src="../../static/wallet.png" mode=""></image>提现记录</view>
           <view class="">
             <uni-icons class="iconright" type="right" size="20"></uni-icons>
           </view>
         </view>
       </view>
       
       <view class="classify">
         <view class="" @click="gettopages('佣金明细')">
           <view class="imgbox">
             <image class="detail" src="https://www.iwangbang.com/skin/wx_mp_aixz/image/detail.png" mode=""></image>
           </view>
           <view class="">
             <view class="tg-title">佣金明细</view>
             <view class="tg-txt">{{brokerage}}&nbsp;元</view>
           </view>
         </view>
         <view class="" @click="gettopages('直推用户')">
           <view class="imgbox">
            <image class="subordinate" src="https://www.iwangbang.com/skin/wx_mp_aixz/image/subordinate.png" mode=""></image>
           </view>
           <view class="">
             <view class="tg-title">直推用户</view>
             <view class="tg-txt">{{oneuser}}&nbsp;人</view>
           </view>
         </view>
        
         <view class="" @click="gettopages('推广订单')">
           <view class="imgbox">
             <image class="tgorder" src="https://www.iwangbang.com/skin/wx_mp_aixz/image/order.png" mode=""></image>
           </view>
           <view class="">
             <view class="tg-title">推广订单</view>
             <view class="tg-txt">{{order_num}}&nbsp;笔</view>
           </view>
         </view>
         <view class="" @click="gettopages('下级用户')">
           <view class="imgbox">
             <image class="popularize" src="https://www.iwangbang.com/skin/wx_mp_aixz/image/popularize.png" mode=""></image>
           </view>
           <view class="">
             <view class="tg-title">下级用户</view>
             <view class="tg-txt">{{twouser}}&nbsp;人</view>
           </view>
         </view>
       
       </view>
       <view class="" style="margin-top: 30rpx;">
         <button class="invite" open-type="share" @click="ljinvite">立即邀请</button>
       </view>
    </view>
    
  </view>
</template>

<script>
  export default {
    onLoad() {
      this.userheadeimg = uni.getStorageSync('wbyun_headimg')
    },
    onShow() {
      this.name = uni.getStorageSync('wbyun_username')
      this.getinvite()
      this.getmywallet()
    },
    onShareTimeline:function(res){
          return {
            title: '小帮观影，我的AI影评顾问',
            imageUrl:'https://www.iwangbang.com/skin/wx_mp_xbgy/share.jpg',
            query: "inviteCode="+uni.getStorageSync('wbyun_icode')
          }
        },
    onShareAppMessage(res) {
      console.log(res);
      console.log(uni.getStorageSync('wbyun_icode'));
      return {
            title: '小帮观影，我的AI影评顾问',
            imageUrl:'https://www.iwangbang.com/skin/wx_mp_xbgy/share.jpg',
            path: '/pages/index/index?inviteCode=' + uni.getStorageSync('wbyun_icode')
          }
    },
    data() {
      return {
        name:'',
        oneuser:'',
        twouser:'',
        brokerage:'',
        order_num:'',
        jewallet:'',
        userheadeimg:''
      }
    },
    methods:{
      getinvite() {
        uni.request({
        	url: getApp().globalData.apiDomain+'/invite/inviteDetail',
        	method: 'POST',
        	header: {
        		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
        		'token': uni.getStorageSync('wbyun_token'),
            'wbapp':'weixin_mp_xbgy'
        	},
        	data: {},
        	dataType: 'json',
        	success:  res => {
            console.log(res);
        		if (res['data']['code'] == 200) {
              this.oneuser = res.data.datas.yiji.length
              this.twouser = res.data.datas.erji.length
              console.log(res.data.datas.erji.order_num);
              this.order_num = res.data.datas.order_num
              this.brokerage = res.data.datas.sum_price
        			return;   
        		} else { 
        			uni.showToast({
        				title: res['data']['msg'],
        				icon: 'none'
        			});
              
        		}
        	},
        	fail: () => {},
        	complete: () => {
        	}
        });
      },
      getmywallet() {
        uni.request({
        	url: getApp().globalData.apiDomain+'/wallet/mywallet',
        	method: 'POST',
        	header: {
        		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
        		'token': uni.getStorageSync('wbyun_token'),
            'wbapp':'weixin_mp_xbgy'
        	},
        	data: {},
        	dataType: 'json',
        	success:  res => {
            console.log(res);
        		if (res['data']['code'] == 200) {
              this.jewallet = res.data.datas.wallet
        			return;   
        		} else { 
        			uni.showToast({
        				title: res['data']['msg'],
        				icon: 'none'
        			});
              
        		}
        	},
        	fail: () => {},
        	complete: () => {
        	}
        });
      },
      applybtn() {
        if(uni.getStorageSync('wbyun_tel') == '未授权手机号' && uni.getStorageSync('wbyun_username') == '') {
          uni.showToast({
          	title: '请先授权手机号！',
          	icon: 'none'
          });
        }else {
          uni.request({
          	url: getApp().globalData.apiDomain+'/invite/promoter',
          	method: 'POST',
          	header: {
          		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
          		'token': uni.getStorageSync('wbyun_token'),
              'wbapp':'weixin_mp_xbgy'
          	},
          	data: {},
          	dataType: 'json',
          	success:  res => {
              console.log(res);
          		if (res['data']['code'] == 200) {
                 uni.showToast({
                  title: res['data']['msg'],
                  icon: 'none'
                 });
          			return;   
          		} else { 
          			uni.showToast({
          				title: res['data']['msg'],
          				icon: 'none'
          			});
          		}
          	},
          	fail: () => {},
          	complete: () => {
          	}
          });
        }
        
        console.log(uni.getStorageSync('wbyun_username'));
        
      },
      gettopages(e) {
        if(e== '直推用户') {
          uni.navigateTo({
            url: '/pagesD/direct/direct?id='+'直推用户',
          });
        }else if(e == '下级用户') {
          uni.navigateTo({
            url: '/pagesD/direct/direct?id='+'下级用户',
          });
        }else if(e == '佣金明细') {
          uni.navigateTo({
            url: '/pagesD/direct/direct?id='+'佣金明细',
          });
          
        }else if(e == '推广订单') {
          uni.navigateTo({
            url: '/pagesD/direct/direct?id='+'推广订单',
          });
        }
      },
      withdrawals() {
        if(this.jewallet == '0.00') {
          uni.showToast({
           title: '暂无可提现佣金',
           icon: 'none'
          });
          return
        }
        uni.navigateTo({
          url: '/pagesD/withdrawals/withdrawals',
        });
      },
      txrecord(){
        uni.navigateTo({
          url: '/pagesD/txrecord/txrecord',
        });
      },
      ljinvite(){
        console.log(uni.getStorageSync('wbyun_icode'));
        uni.share({
        	provider: "weixin",
        	scene: "WXSceneSession",
        	type: 0,
          title:'小帮观影，我的AI影评顾问',   
          imageUrl:'/static/logo.png',
        	summary: "小帮观影，我的AI影评顾问",
          miniProgram :{
            id:'wx36bee4da16f3faa2',
            path:"/pages/index/index?inviteCode=" + uni.getStorageSync('wbyun_icode'),
            type:1
          },
        	success: function (res) {
        		console.log("success:" + JSON.stringify(res));
        	},
        	fail: function (err) {
        		console.log("fail:" + JSON.stringify(err));
        	}
        });
      }
    }
  }
</script>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .contbox {
    width: 95%;
    margin: auto;
  }
  .header-box {
    width: 100%;
    height: 200rpx;
    display: flex;
    align-items: center;
    border-radius: 15rpx;
    margin-top: 20rpx;
    background-color:#4193FE;
  }
  .header-right {
    display: flex;
  }
  .head {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    margin-left: 30rpx;
    background-color: rgb(241,241,241);
  }
  .headeimg {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
  }
  .header-text {
    width: 300rpx;
    height: 150rpx;
    margin-left: 25rpx;
    padding-top: 10rpx;
    color: #fff;
    
  }
  .username {
    font-size: 40rpx;
    font-weight: 600;
  }
  .num {
    width: 120rpx;
    height: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;
    border: 1px solid #fff;
    border-radius: 20rpx;
  }
  .sum-box {
    width: 100%;
    height: 260rpx;
    margin-top: 30rpx;
    border-radius: 15rpx;
    background-color: #fff;
    position: relative;
  }
  .withdraw {
    width: 95%;
    margin: auto;
    padding-top: 50rpx;
    display: flex;
    justify-content: space-between;
    
  }
  .txbtn {
    width: 200rpx;
    background-color: #4193FE;
    color: #fff;
    border-radius: 40rpx;
    margin-top: 10rpx;
    font-size: 30rpx;
  }
  .brokerage {
    padding-left: 20rpx;
  }
  .money {
    font-size: 55rpx;
    font-weight: 700;
    color: #4193FE;
    margin-bottom: 10rpx;
  }
  .record {
    position: absolute;
    width: 100%;
    padding: 0 5%;
    height: 70rpx;
    background-color: rgb(238,253,253);
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .wallet {
    width: 45rpx;
    height: 45rpx;
    margin-right: 10rpx;
  }
  .classify {
    width: 100%;
    height: 368rpx;
    background-color: #f3f3f3;
    border-radius: 15rpx;
    margin-top: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .classify > view {
    width: 49.6%;
    height: 180rpx;
    background-color: #fff;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    
  }
  .detail,.popularize {
    width: 80rpx;
    height: 80rpx;
  }
  .tgorder,.subordinate {
    width: 90rpx;
    height: 90rpx;
  }
  .imgbox {
   width: 140rpx;
   text-align: center;
  }
  .tg-title {
    font-size: 32rpx;
  }
  .tg-txt {
    color: #939393;
  }
  .invite {
    background-color: #4193FE;
    color: #fff;
    border: 0;
  }
</style>